<template>
  <el-dialog
    :model-value="tbPositionVisible"
    title="选择表位置"
    width="70%"
    :before-close="handleClose"
  >
    <div class="tb-position">
      <!-- 台区显示内容 -->
      <div class="station-area">
        <div class="station-area-item" v-for="item in stationArea">
          <p class="item1">
            <el-checkbox
              @change="choseBw(item)"
              v-model="item.checked"
              :disabled="item.state ? true : false"
            />
            {{ item.stationText }}
          </p>
          <p class="item2">{{ item.label }}</p>
          <p class="item3">
            <img v-if="item.state" src="@/assets/images/station-area1.png" />
            <img v-else src="@/assets/images/station-area2.png" />
          </p>
        </div>
      </div>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleClose">返回</el-button>
        <el-button type="primary" @click="handle"> 确定 </el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script setup>
import { ref, onMounted } from "vue";
import { useAppStore, paramsDataStore } from "@/stores";
import { storeToRefs } from "pinia";

const emit = defineEmits(["changeBwStatus1"]);
const props = defineProps({
  currentId: Number,
  currentPname: String,
});
const useApp = useAppStore();
let { tbPositionVisible, organStructure } = storeToRefs(useApp);
const paramsData = paramsDataStore();
let { stationArea, selectedArea } = storeToRefs(paramsData);

const tableData = ref([]);
const currentBw = ref([]);

const handleChange = (value) => {
  // console.log(value);
};
// 关闭弹窗
const handleClose = () => {
  tbPositionVisible.value = false;
  currentBw.value = [];
};
// 点击确定
const handle = () => {
  extractArr(organStructure.value[0].children); //匹配可追加的数据
  changeBwStatus1(currentBw.value);
  tbPositionVisible.value = false;
  currentBw.value = [];
};
//匹配表位信息
const changeBwStatus1 = (arr = []) => {
  stationArea.value.forEach((item) => {
    if (arr.includes(Number(item.value))) {
      item.state = 1;
      item.checked = true;
      item.disabled = true;
      item.pname = props.currentPname;
      item.name = "用户表";
      selectedArea.value.push(Number(item.value));
    }
  });
};
const extractArr = (items, arr = []) => {
  for (let i = 0; i < items.length; i++) {
    if (items[i].id === props.currentId) {
      if (items[i].children == undefined) items[i].children = [];
      //追加数据
      let child = {};
      currentBw.value.forEach((item) => {
        child = {
          id: "4" + item,
          name: "用户表",
          type: "4",
          position: item,
          meterModel: "DDS318",
          meterType: "互感器表",
          wiringType: "三相四线",
          voltage: "AC220/380V",
          current: "1.5(6)A",
          meterAddr: "",
          ptRatio: "1V/1V",
          ctRatio: "50A/5A",
          installAddr: "",
        };
        items[i].children.push(child);
      });
      break;
    }
    if (items[i].children) {
      extractArr(items[i].children);
    }
  }
  return arr;
};
//选择表位
const choseBw = (item) => {
  if (item.checked) {
    currentBw.value.push(Number(item.value));
  } else {
    let arr = currentBw.value.filter((element) => element != item.value);
    currentBw.value = arr;
  }
};
</script>
<style lang="scss" scoped>
.tb-position {
  .station-area {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    .station-area-item {
      flex: 1;
      height: 125px;
      background-color: #cacaca;
      text-align: center;
      cursor: pointer;
      /* 间隙为5px */
      margin: 0 5px 5px 0;
      /* END */

      /* 这里的10px = (分布个数8-1)*间隙5px, 可以根据实际的分布个数和间隙区调整 */
      width: calc((100% - 35px) / 8);
      /* END */

      /* 加入这两个后每个item的宽度就生效了 */
      min-width: calc((100% - 35px) / 8);
      max-width: calc((100% - 35px) / 8);

      /* END */
      &:nth-child(8n) {
        /* 去除第3n个的margin-right */
        margin-right: 0;
      }

      p {
        height: 20px;
      }
    }
  }
}
</style>
